<template>
	<view class="okk">
		<uni-section title="取消排队" type="line" style="margin-bottom: 3px;">
			<view class="box-bg">
				<uni-nav-bar height="150rpx" left-icon="left" title="取消排队" @clickLeft="back" />
			</view>
		</uni-section>
		<view class="ok">
			<view>
				<view>
					<image
						src="https://cdn3.axureshop.com/demo/2116044/images/%E6%8E%92%E9%98%9F%E6%88%90%E5%8A%9F/u2036.png">
					</image>
				</view>
				<view>排队已取消</view>
			</view>
		</view>
		<view class="sue">
			<view class="sue1">
				<view id="ber1">中桌B010</view>
				<view id="num">（3-4）人</view>
			</view>
			<view class="sue2">
				<view>
					<view id="awaitnum">前方等待桌数</view>
					<view>
						<view id="nu">30</view>
						<view id="ber">桌</view>
					</view>
				</view>
				<view>
					<view id="awaitnum">预计等待时间</view>
					<view>
						<view id="nu">30</view>
						<view id="ber">分钟</view>
					</view>
				</view>
			</view>

		</view>
		<view class="bo">
			<button v-model="id" @click="confirm(id)" class="bottom">再次排队</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 1
			}
		},
		methods: {
			confirm(key) {
				uni.navigateTo({
					url: "/pages/takeNum/takeNum?id="+key
				});
			},
			back(){
				uni.redirectTo({
					url: "/pages/choiceshop/choiceshop"
				});
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			if (option.id != undefined) {
				console.log(option.id); //打印出上个页面传递的参数。
				this.id = option.id;
				console.log('this.id:' + this.id);
				// console.log(option.name); //打印出上个页面传递的参数。
			} else {
				console.log('默认id=' + this.id);
			}
		},
	}
</script>

<style>
	.bottom {
		background-color: #fff;
		border: #f77214 2rpx solid;
		color: #f77214;
		border-radius: 50rpx;
		margin: 20rpx;
	}

	.bo {
		position: absolute;
		width: 750rpx;
		/* height: 200rpx; */
		background-color: #fff;
		bottom: 0rpx;
	}

	#ber {
		color: #b4b4b4;
	}

	#nu {
		font-size: 60rpx;
		color: #b4b4b4;
	}

	#ber1 {
		color: #b4b4b4;
	}

	#num {
		padding-bottom: 30rpx;
	}

	#awaitnum {
		padding: 50rpx;
		color: #b4b4b4;
	}

	.sue2 {
		display: flex;
		justify-content: center;
		align-items: center;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		border-radius: 30rpx;
		background-color: #fff;
	}

	.sue2>view view:nth-child(1) {
		/* padding-top: 30rpx; */
	}

	.sue2>view view:nth-child(2) {
		display: flex;
		justify-content: center;
		/* justify-content: space-between; */
		align-items: center;
		text-align: center;
	}

	.sue {
		/* background-color: #fff; */
		align-items: center;
		margin: 30rpx;
		border-radius: 30rpx;
		padding: 40rpx;
	}

	.sue1 {
		text-align: center;
		/* padding: 10rpx; */
		border-radius: 20rpx;
		border-bottom: 2rpx dashed #b4b4b4;
		background-color: #fff;
	}

	.sue1 view:nth-child(1) {
		font-size: 40rpx;
		/* padding: 5rpx; */
	}

	.sue1 view:nth-child(2) {
		color: #b4b4b4;
		/* padding-bottom: 20rpx; */
	}

	.sue3 {
		text-align: center;
		background-color: #fff;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		padding: 70rpx;
		color: #b4b4b4;
	}

	.ok {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 50rpx;
	}

	.okk {
		padding-bottom: 400rpx;
		background-color: rgba(245, 247, 247, 1);
	}

	.ok>view image {
		width: 100rpx;
		height: 100rpx;
		margin-left: 30rpx;
	}
</style>
